<template>
	<view>
		<navigator hover-class="fales"
			:url="'/pages/album/teacher-home-fans?type=1&userId='+userinfo.id+'&sex='+userinfo.sex" class="head-item">
			<view class="head-item-left">
				<view class="head">
					<image src="../../static/images/fans.png" mode="scaleToFill"></image>
				</view>
				<view>
					<view class="item-name">粉丝</view>
				</view>
			</view>
			<view>
				<view><i class="iconfont iconjiantou qwert"></i></view>
			</view>
		</navigator>

		<navigator :url="'online-service?data='+JSON.stringify(item)" class="item" v-for="(item,index) in chatuserlist"
			:key="index">
			<view class="head">
				<image :src="(item.avatar && (item.avatar.indexOf('http')!=-1))?item.avatar:defheadimg"
					mode="scaleToFill"></image>
			</view>
			<view class="msg">
				<view>
					<view class="item-name">{{item.nicheng?item.nicheng:'未设置昵称'}}</view>
					<view class="item-lable" v-if="item.content">
						<view class="item-lable-text">{{item.content}}</view>
						<view class="item-lable-time">{{item.create_time}}</view>
					</view>
				</view>
				<view class="item-num" v-if="item.noneNum>0">{{item.noneNum}}</view>
			</view>
		</navigator>

	</view>
</template>

<script>
	import utils from '@/common/util.js'
	
	export default {
		data() {
			return {
				defheadimg: '',
				chatuserlist: [],
				userinfo: {},
				user_id: []
			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userInfo');
		
			this.getMesages();
		},
		onLoad() {
			this.defheadimg = this.defimg;
		},
		methods: {
			getMesages: function() {
				
				this.chatuserlist = [];
				let chatuserlist = uni.getStorageSync('chatuserlist');
			
				
				this.$chatapi.apiPost('api/v1/index/message/noread').then(res => {
					let data = res.data.data;
					console.log(data,"====");
					for(let key in data){
						if(chatuserlist[key]){
							chatuserlist[key]['noneNum'] = Number(chatuserlist[key]['noneNum']) +Number(data[key]['count']);
						}else{
							let userdata={
								nicheng:data[key]['nicheng'],
								user_id:data[key]['fromid'],
								avatar:data[key]['avatar'],
							}
							utils.Saveuser(userdata,data[key]['content'],data[key]['create_time']);
							userdata['noneNum'] = data[key]['count'];
							userdata['create_time'] = data[key]['create_time'];
							chatuserlist[key] = userdata;
						}
					}
					for (var key in chatuserlist) {
						chatuserlist[key]['time'] = chatuserlist[key]['create_time'];
						chatuserlist[key]['create_time'] = utils.getBriefTime(chatuserlist[key]['create_time']);
						this.chatuserlist.push(chatuserlist[key]);
						this.user_id.push(chatuserlist[key]['user_id'])
					}
					this.chatuserlist = this.sortBykey(this.chatuserlist,'time').reverse();
				});
			},
			 sortBykey:function(ary, key) {
			  return ary.sort(function (a, b) {
			    let x = a[key]
			    let y = b[key]
			    return ((x < y) ? -1 : (x > y) ? 1 : 0)
			  })
			}
		}
	}
</script>

<style lang="scss">
	.head-item {
		width: 92%;
		height: 160upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.head-item-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}

	.item {
		width: 92%;
		height: 160upx;
		margin: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: 1upx solid #DDDDDD;
	}

	.head {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		margin-right: 20upx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.msg {
		width: calc(100% - 120upx);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item-num {
			width: 32upx;
			height: 32upx;
			background-color: #FF3B30;
			color: #FFFFFF;
			line-height: 32upx;
			text-align: center;
			border-radius: 50%;
			font-size: 26upx;
		}
	}

	.item-name {
		color: #333333;
		font-size: 30upx;
	}

	.item-lable {
		display: flex;
		justify-content: flex-start;
		color: #999999;
		font-size: 26upx;
		margin-top: 20upx;

		.item-lable-text {
			max-width: 300upx;
			margin-right: 20upx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.item-lable-time {}
	}
</style>
